<template>
        <div class="home">
            <div class="Recommend">
                <div class="titleList">
                    <img src="../assets/images/title.png" alt="">
                </div>
                <div id="sticky-wrapper" class="sticky-wrapper" style="height: 70px;">
                    <div class="foode-main-menu">
                        <div class="classy-nav-container breakpoint-off light left">
                            <div class="container">
                                <!-- Menu -->
                                <nav class="classy-navbar" id="foodeNav">
                                    <div class="classy-menu">
                                        <div class="classycloseIcon"><div class="cross-wrap"><span class="top"></span><span class="bottom"></span></div></div>
                                        <div class="classynav">
                                            <ul>
                                                <router-link tag="li" to="/Recommend/Recone"><a ><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">文人雅颂</font></font></a></router-link>
                                                <router-link tag="li" to="/Recommend/Rectwo"><a href="#"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">近代诗歌</font></font></a></router-link>
                                                <router-link tag="li" to="/Recommend/Recthree"><a><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">白话散文</font></font></a></router-link>
                                                <router-link tag="li" to="/Recommend/Recfour"><a><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">文学精选</font></font></a></router-link>
                                                <router-link tag="li" to="/Recommend/Recfive"><a><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">国外著作</font></font></a></router-link>
                                            </ul>
                                        </div>
                                    </div>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div  v-for="item in poeamlist" :key="item.id" v-html="item.neirong" ></div> -->
            </div>
            <div class="RecomView">
                <router-view></router-view>
            </div>
        </div>
    
</template>
<script>
export default {
    


    data(){
        return {

        }
    }
}
</script>
<style>
.classynav li.router-link-active {
    background-color: #0d4650 ;
    color: #ffffff !important;
}
 .RecomView{
     margin-top: 20px;
      margin-bottom: 20px;
 }
 .titleList{
    margin: 0 auto;
    margin-top: 20px;
    padding-top: 5px;
 }
 .Recommend{
     text-align: center;
 }
 .classy-nav-container {
    position: relative;
    z-index: 100;
    background-color: #ffffff;
}
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.header-area .foode-main-menu .classy-navbar {
    padding: 0;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}
.classy-navbar {
    padding: 0;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}

.classy-navbar {
    width: 100%;
    height: 70px;
    padding: 0.5em 2em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items: center;
}
.breakpoint-off .classynav {

    display: flex;
    -webkit-box-align: center;
    align-items: center;
}
.classynav ul li {
    display: inline-block;
    clear: both;
    position: inherit;
    z-index: 10;
}
.header-area .foode-main-menu .classynav ul li a {
    padding: 0 25px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    
}
.classynav ul li a:hover{
    border-bottom: 1px red;
    background-color: #0d4650;
    color: #ffffff;
}
.classynav ul li a {
    padding: 0 45px;
    margin: 0px;
    display: block;
    height: 35px;
    font-size: 14px;
    line-height: 34px;
}
.classy-nav-container a {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    text-decoration: none;
    outline: none;
    font-size: 14px;
    font-weight: 400;
    color: #232323;
    display: inline-block;
}
</style>
